<!-- eslint-disable vue/html-self-closing -->
<template>
  <div class="lib">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
  </div>
</template>

<script >
import * as echarts from 'echarts'
// 散点图---------------------------------------------------------
const showbox4 = async() => {
  var myChart = echarts.init(document.querySelector('.box4'))
}
// 饼状图---------------------------------------------------------
const showbox3 = async() => {
  var myChart = echarts.init(document.querySelector('.box3'))
  var option = {
    backgroundColor: '#2c343c',
    title: {
      text: '自定义饼图',
      left: 'center',
      top: 20,
      textStyle: {
        color: '#ccc'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    visualMap: {
      show: false,
      min: 80,
      max: 600,
      inRange: {
        colorLightness: [0, 1]
      }
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data: [
          { value: 335, name: 'Direct' },
          { value: 310, name: 'Email' },
          { value: 274, name: 'Union Ads' },
          { value: 235, name: 'Video Ads' },
          { value: 400, name: 'Search Engine' }
        ].sort(function(a, b) {
          return a.value - b.value
        }),
        roseType: 'radius',
        label: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        labelLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          },
          smooth: 0.2,
          length: 10,
          length2: 20
        },
        itemStyle: {
          color: '#c23531',
          shadowBlur: 200,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function(idx) {
          return Math.random() * 200
        }
      }
    ]
  }
  myChart.setOption(option)
}
// 倒柱状图---------------------------------------------------------
const showbox2 = async() => {
// 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector('.box2'))
  const option = {
    title: {
      text: '世界人口'
    },
    tooltip: {
      // 触发机制
      trigger: 'axis',
      // 坐标轴指示器适配项
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
    },
    series: [
      {
        name: '2011',
        type: 'bar',
        data: [18203, 23489, 29034, 104970, 131744, 630230]
      },
      {
        name: '2012',
        type: 'bar',
        data: [19325, 23438, 31000, 121594, 134141, 681807]
      }
    ]
  }
  myChart.setOption(option)
}
// 柱状图-------------------------------------------------------
const showbox1 = async() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector('.box1'))
  // 绘制图表
  myChart.setOption({
    title: {
      text: '商品销量信息',
      textStyle: {
        color: '#000',
        fontSize: 16

      },
      textAlign: 'auto'
    },
    // 提示框
    tooltip: {},
    // 工具栏
    toolbox: {
      // 配置具体的工具按钮
      feature: {
        // 保存图片
        saveAsImage: {},
        // 区域缩放
        dataZoom: {},
        // 图标类型切换
        magicType: {
          type: ['line', 'bar', 'stack']
        }
      }
    },
    // x轴
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    // 图例
    legend: {},
    // y轴
    yAxis: {},
    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
    // 系列
    series: [
      {
        name: '一季度',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      },
      {
        name: '二季度',
        type: 'bar',
        data: [5, 15, 20, 30, 25, 15]
      },
      {
        name: '三季度',
        type: 'bar',
        data: [5, 15, 20, 30, 25, 15]
      }
    ]
  })
}
export default {
  mounted() {
    showbox1()
    showbox2()
    showbox3()
  }

}
</script>

<style lang="scss" scoped>
.lib{
  display: flex;
  flex-wrap: wrap;
  &>div{
    width: 50%;
    height: 300px;
  }
}
</style>
